<template>
	<view class="flexColumn">
		<image src="../../static/beij.png" class="headerImg"></image>
		<view class="content flexColumnCenter">
			<image src="../../static/2.png" class="imgs"></image>
			<text class="name">刘彦祖</text>
			<text class="brief">13J 43Q kkk AA</text>
		</view>
		
		<view class="List">
			<view  v-for="(item,index) in ListArr" :key="index">
				<view class="list_li">
					<view class="imgView"><image :src="item.icon" class="imgs" :style="{width:item.width , height:item.height}"></image></view>
					<view class="user">{{item.name}}</view>
					<view class="iconfont icon-iconfontzhizuobiaozhun19"></view>
				</view>
				<view class="lines"></view>
			</view>
		</view>
		
		<view class="List">
			<view class="list_li">
				<view class="imgView"><image src="../../static/newimg/20.png" style="width: 40rpx;height: 46rpx;"  class="imgs"></image></view>
				<view class="user">修改密码</view>
				<view class="iconfont icon-iconfontzhizuobiaozhun19"></view>
			</view>
			<view class="lines"></view>	
		</view>
		<view class="List">
			<view class="list_li">
				<view class="imgView"><image src="../../static/newimg/21.png" style="width: 52rpx;height: 46rpx;"  class="imgs"></image></view>
				<view class="user">退出登录</view>
				<view class="iconfont icon-iconfontzhizuobiaozhun19"></view>
			</view>
			<view class="lines"></view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					ListArr : [
						{
							id:1,
							name:"我的公司",
							icon : "../../static/newimg/17.png" ,
							width : '42rpx' ,
							height:'51rpx'
						},
						{
							id:2,
							name:"职位管理",
							icon : "../../static/newimg/18.png",
							width : '48rpx' ,
							height:'48rpx'
						},
						{
							id:3,
							name:"收到的简历",
							icon : "../../static/aa.png",
							width : '45rpx' ,
							height:'47rpx'
						},
						{
							id:4,
							name:"平台客服",
							icon : "../../static/newimg/19.png",
							width : '50rpx' ,
							height:'45rpx'
						}
					]
				}
			},
			methods:{
				
			},
			onLoad:function(){
				  
			}
		}
</script>

<style lang="scss">
	@import "../../static/icon/icon.css";
	
	@mixin publicImg($width,$height) {
	   width: $width;
	   height:$height;
	}
	
	@mixin Line($width,$back) {
	   width: $width;
	   height:1rpx;
	   background:$back ;
	}
	
	page{
		background: #F5F5F5;
	}
	
	.headerImg{
		width: 750rpx;
	}
	
	
	.lines{
		@include Line(100%,$uni-text-color-line);
	}
	
	.content{
		width: 90%;
		margin: 0 auto;
		background: $uni-bg-color;
		min-height: 230rpx;
		border-radius: 20rpx;
		margin-top: -230rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		
		.imgs{
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			margin-top: -50rpx;
		}
		
		.name{
			font-size: $uni-font-size-big;
			font-weight: 670;
			margin-top: 30rpx;
		}
		.brief{
			font-size: $uni-font-size-base;
			margin-top: 10rpx;
		}
	}
	
	.List{
		width: 90%;
		margin: 0 auto;
		background: $uni-bg-color;
		border-radius: 20rpx;
		font-size: $uni-font-size-base;
		margin-top: 25rpx;
		
		.list_li{
			height: 110rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			width: 100%;
			
			.imgs{
				@include publicImg(35rpx,44rpx)
			}
			.imgView{
				width: 8%;
				margin: 0 auto;
			}
			.user{
				width: 80%;
			}
			.iconfont{
				width: 5%;
				text-align: center;
				color: $uni-text-color-currency;
			}
			
		}
	}
	
	
</style>
